<template>
	<coreshop-page title="分销申请" mode="left">
		<view class="m-25" v-if="state.show">
			<view class="header">
				<view class="ok">
					<text class="reach" v-if="state.info?.conditionStatus">已达标</text>
					<text class="reach" v-else>未达标</text>
					<text class="rate">{{state.info?.conditionProgress}}%</text>
				</view>
				<view class="progress">
					<uv-line-progress :percentage="state.info?.conditionProgress" height="15"></uv-line-progress>
				</view>
				<view class="apply">{{state.info?.conditionMsg}}</view>
				<view class="tip">
					<view>注：消费金额只算实付金额部分，储值抵扣/退款退货金额不算在内。</view>
				</view>
			</view>
			<view class="requierd">
				<view class="tit">分销商须知</view>
				<view class="desc">
					<uv-parse :content="shopConfigStore.config?.distributionNotes"></uv-parse>
				</view>
			</view>
			
			<coreshop-fixed-bottom-button v-if="state.info?.conditionStatus" :radius="100" title="申请"
				@onClick="onApplyFormVisible()"></coreshop-fixed-bottom-button>
			<coreshop-fixed-bottom-button v-else :radius="100" title="您的条件暂不满足"
				ackgroundColor="rgba(211,49,35,.5)"></coreshop-fixed-bottom-button> 
				
			<uv-popup ref="applyFormPopupRef" mode="bottom" :round="8" :closeOnClickOverlay="false" closeable>
				<ApplyForm @onSave="onApply()" />
			</uv-popup>
		</view>
	</coreshop-page>

</template>

<script setup lang="ts">
	import { reactive, ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import ApplyForm from './apply-form.vue';
	import { queryDistributionInfo } from '@/core/api';
	import type { Response } from '@/core/models';
	import { handleShowToast, handleRouteRedirectTo } from '@/core/utils';
	import { useShopConfigStore } from '@/core/store';
	import { DistributionApplyStatus } from '@/core/enum';

	// 获取项目配置
	const shopConfigStore = useShopConfigStore();

	const applyFormPopupRef = ref();

	const state = reactive<{
		info : any;
		show : boolean;
	}>({
		info: {},
		show: false,
	})
	onLoad(() => {
		getDistributionInfo();
	});

	/** 获取分销商进度状态 */
	const getDistributionInfo = async () => {
		const info : Response<any> = await queryDistributionInfo();
		if (info.status) {
			state.info = info.data;
			if (info.data?.verifyStatus == DistributionApplyStatus.success || (!info.data?.needApply && info.data?.conditionStatus)) {
				handleRouteRedirectTo('/pages/subpackage/distribution/index/index');
			} else if (info.data?.verifyStatus > DistributionApplyStatus.success) {
				handleRouteRedirectTo(`/pages/subpackage/distribution/apply/state`);
			} else {
				state.show = true;
			}
		} else {
			handleShowToast(info.msg)
		}
	}

	const onApplyFormVisible = () => {
		applyFormPopupRef.value?.open();
	}

	const onApply = () => {
		applyFormPopupRef.value?.close();
	}
</script>

<style scoped lang="scss">
	.header {
		background-color: #D33123;
		padding: 80rpx 0;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		border-radius: 15rpx;

		.ok {
			color: #ffffff;

			.reach {
				font-size: 30rpx;
			}

			.rate {
				font-size: 50rpx;
			}
		}

		.progress {
			margin: 20rpx 0;
			width: 500rpx;
		}

		.apply {
			color: #ffffff;
			font-size: 28rpx;
			margin-top: 10rpx;
		}

		.tip {
			font-size: 24rpx;
			margin-top: 80rpx;
			color: #ffffff;
			padding: 0 40rpx;
		}
	}

	.requierd {
		margin-top: 30rpx;
		padding: 5rpx;

		.tit {
			font-size: 30rpx;
		}

		.desc {
			font-size: 27rpx;
			margin-top: 20rpx;
		}
	} 
</style>